<template>
  <div id="adminRoot">
    <v-app class="app">
      <app-drawer class="app--drawer"></app-drawer>
      <app-toolbar class="app--toolbar"></app-toolbar>
      <v-content>
        <!-- Page Header -->
        <page-header v-if="$route.meta.breadcrumb"></page-header>
        <div class="page-wrapper">
          <transition name="animated-transition" enter-active-class="animated fadeIn">
            <router-view></router-view>
          </transition>
        </div>
        <!-- App Footer -->
        <v-footer height="auto" class="white pa-3 app--footer">
          <span class="caption">IMWNK &copy; {{ new Date().getFullYear() }}</span>
        </v-footer>
      </v-content>
      <!-- Go to top -->
      <app-fab></app-fab>
      <!-- theme setting -->
      <v-btn
        small
        fab
        dark
        falt
        fixed
        top="top"
        right="right"
        class="setting-fab"
        color="red"
        @click="openThemeSettings"
      >
        <v-icon>settings</v-icon>
      </v-btn>
      <v-navigation-drawer
        class="setting-drawer"
        temporary
        right
        v-model="rightDrawer"
        hide-overlay
        fixed
      >
        <theme-settings></theme-settings>
      </v-navigation-drawer>
    </v-app>
  </div>
</template>
<script>
import AppDrawer from './public/AppDrawer'
import AppToolbar from './public/AppToolbar'
import AppFab from '@/components/AppFab'
import PageHeader from './public/PageHeader'
import ThemeSettings from './public/ThemeSettings'
export default {
  name: 'admin-main',
  components: {
    AppDrawer,
    AppToolbar,
    AppFab,
    PageHeader,
    ThemeSettings
  },
  data: () => ({
    expanded: true,
    rightDrawer: false
  }),
  methods: {
    openThemeSettings () {
      this.$vuetify.goTo(0)
      this.rightDrawer = !this.rightDrawer
    }
  }
}
</script>
<style scoped>
.setting-fab {
  top: 50% !important;
  right: 0;
  border-radius: 0;
}

.page-wrapper {
  min-height: calc(100vh - 64px - 50px - 81px);
}
</style>
